<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--设置标签图标-->
    <link href="favicon.ico" rel="shortcut icon">
    
    <style>
    	.h_c_logo img{
    		width:100px;
    		height:100px;
    		
    	}
    	*{
		    margin: 0;
		    padding: 0;
		    box-sizing: border-box;
		}
		body{
		    background: #f5f5f5;
		}
		#header{
		    height: 210px;
		    background: white;
		}
		#header .header_top{
		    height: 36px;
		    background: #f5f5f5;
		}
		#header .header_top_center{
		    width: 1200px;
		    height: 36px;
		    margin: 0 auto;
		    line-height: 36px;
		}
		#header .header_top_center .h_top_left{
		    color: #6c6c6c;
		    font-size: 13px;
		    float: left;
		    height: 36px;
		}
		#header .header_top_center .h_top_right{
		    float: right;
		    height: 36px;
		}
		#header .header_top_center .h_top_right a{
		    color: #6c6c6c;
		    margin: 0 5px;
		    font-size: 13px;
		}
		#header .header_center{
		    width: 1200px;
		    height: 124px;
		    margin: 0 auto;
		}
		#header .header_center .h_c_logo{
		    width: 190px;
		    height: 124px;
		    float: left;
		}
		#header .header_center .h_c_search{
		    width: 815px;
		    height: 124px;
		    float: left;
		
		}
		#header .header_center .h_c_code{
		    width: 195px;
		    height: 124px;
		
		    float: left;
		}
		#header .h_c_logo img{
		    width: 170px;
		    height: 100px;
		    margin-top: 10px    ;
		}
		
		#header .h_c_search form{
		    width: 650px;
		    height: 40px;
		    margin-left: 80px;
		    margin-top: 40px;
		}
		#header .h_c_search form .t_input{
		    width: 555px;
		    height: 40px;
		    border: 2px solid #ff4400;
		    float: left;
		    padding-left: 10px;
		}
		#header .h_c_search form .t_button{
		    width: 75px;
		    height: 40px;
		    float: left;
		    background: #ff4400;
		    border: none;
		}
		#header .h_c_search .hot{
		    margin-left: 80px;
		    margin-top: 10px;
		}
		#header .h_c_search .hot a{
		    color: #6c6c6c;
		    font-size: 13px;
		    margin-right: 5px;
		}
		#header .h_c_search .hot a:hover{
		    color: #ff4400;
		}
		#header .h_c_search .hot a:first-child{
		    color: #ff4400;
		}
		#header .h_c_code img{
		    margin-top: 20px;
		    margin-left: 20px;
		}
		#header .nav{
		    width: 1200px;
		    height: 44px;
		    background: #ff4400;
		    margin: 0 auto;
		    border-radius: 5px;
		}
		#header .nav ul{
		    list-style: none;
		    width: 1200px;
		    height: 44px;
		    line-height: 44px;
		    display: flex;
		}
		
		#header .nav ul li{
		    flex: 1;
		    text-align: center;
		}
		#header .nav ul li a{
		    color: white;
		    font-size: 16px;
		    font-weight: bold;
		}
		#header .nav ul li a:hover{
		    font-size: 25px;
		}
    </style>
</head>

<body>

<!--头部-->
<div id="header">
    <!--顶部-->
    <div class="header_top">
        <div class="header_top_center">
            <div class="h_top_left">
                欢迎来到买了呀
            </div>
            <div class="h_top_right">
            	<c:if test="${sessionScope.state==true }">
            		<a href="editUser.jsp">欢迎  (${sessionScope.user.username })</a>
            		<a href="cart.jsp">购物车</a>
                	<a href="OrderServlet">我的订单</a>
                	<a href="ExitServlet">退出</a>
            	</c:if>
            	<c:if test="${sessionScope.state!=true }">
            		<a href="login.jsp">登录</a>
                	<a href="regist.jsp">免费注册</a>
            	</c:if>
            </div>
        </div>
    </div>
    
    <div class="header_center">
        <div class="h_c_logo">
        	<a href="IndexGoodsServlet?category=1">
            	<img src="images/logo.png" alt="">
            </a>
        </div>
  
    </div>
    <!--导航-->
    <div class="nav">
        <ul>
            <li><a href="IndexGoodsServlet?">首页</a></li>
            <li><a href="GoodsListServlet?category=2&pageIndex=1">电脑办公</a></li>
            <li><a href="GoodsListServlet?category=3&pageIndex=1">家具家居</a></li>
            <li><a href="GoodsListServlet?category=4&pageIndex=1">鲜果时光</a></li>
            <li><a href="GoodsListServlet?category=5&pageIndex=1">图书音像</a></li>
            <li><a href="GoodsListServlet?category=6&pageIndex=1">母婴孕婴</a></li>
        </ul>
    </div>

</div>
</body>
</html>